<template>
  <div>
    <draggable v-model="items" class="cardboard" draggable=".drag" @end="dragEnd" :options="option" :force-fallback="true"
      chosenClass="chosen" ghostClass="ghost">
      <template #item="{ element }">
        <el-card :body-style="{ backgroundColor: colors[element.id % colors.length] }" class="box-card"
          :class="cardCalss(element.text, element.edit)">
          <template v-if="!element.edit">
            <div class="body" v-show="element.text" @click="toggleEdit(element)">{{ element.text }}</div>
            <el-icon class="icon" style="color:#67C23A" v-if="element.text && element.icon==1"><Finished /></el-icon>
            <el-icon class="icon" style="color:#E6A23C" v-if="element.text && element.icon==2"><Star /></el-icon>
            <el-icon class="icon" style="color:#F56C6C" v-if="element.text && element.icon==3"><MagicStick /></el-icon>
            <el-icon class="icon" style="color:#409EFF" v-if="element.text && element.icon==4"><WindPower /></el-icon>

            <el-icon class="add" v-show="!element.text" @click="toggleEdit(element)">
              <Plus />
            </el-icon>
          </template>
          <div v-show="element.edit" class="add-panel">
            <el-input draggable="true" clearable style="width: 100%" v-model="element.text" maxlength="2000" :rows="6"
              type="textarea" show-word-limit placeholder="请输入内容" />
              <el-icon class="icon" style="color:#67C23A;opacity:0.5" :style="{opacity:element.icon==1?1:0.5}" @click="element.icon=1"><Finished /></el-icon>
              <el-icon class="icon" style="color:#E6A23C;opacity:0.5" :style="{opacity:element.icon==2?1:0.5}" @click="element.icon=2"><Star /></el-icon>
              <el-icon class="icon" style="color:#F56C6C;opacity:0.5" :style="{opacity:element.icon==3?1:0.5}" @click="element.icon=3"><MagicStick /></el-icon>
              <el-icon class="icon" style="color:#409EFF;opacity:0.5" :style="{opacity:element.icon==4?1:0.5}" @click="element.icon=4"><WindPower /></el-icon>
              <el-icon class="icon" style="color:#909399;opacity:0.5" :style="{opacity:element.icon==0?1:0.5}" @click="element.icon=0"><Crop /></el-icon>

            
            <div class="tool-bar">
              <el-button type="primary" @click="save(element)" :icon="Save">保存</el-button>
              <el-button text @click="cancel(element)">取消</el-button>
              <el-button type="danger" v-show="!element.new" @click="del(element)" :icon="Close" text>删除</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable"
export default {
  components: {
    draggable
  },
  props: {
    data: {
      types: Array,
      default: []
    },
  },
  data() {
    return {
      drag: false,
      option: {
        group: { name: "cardboard", pull: "clone" }
        , sort: true
      },
      colors: ["#ffe9ff", "#e5edff", "#fbf7c0", "#daf3fe", "#dcfaf0", "#ddfbdf"],
      items: [
        { id: 0, text: "" },
      ]
    }
  },
  computed: {
    cardCalss: function (text, edit) {
      return function (text, edit) {
        let cs = []
        if (edit) cs.push("input")
        if (!text || edit) cs.push("drop")
        if (cs.length == 0) return "drag"
        return cs.join(" ")
      }
    }
  },
  watch: {
    'data'() {
      console.log("data:", this.data)
      this.setItems(this.data)
      this.checkAdd()
    }
  },

  mounted() {
    this.setItems(this.data)
    this.$emit("query")
    this.checkAdd()
  },
  methods: {
    show(fm) {

    },
    setItems(datalist) {
      let items = []
      datalist.forEach(v => {
        v.otext = v.text
        items.push(v)
      })
      this.items = items
    },
    toggleEdit(element) {
      element.edit = !element.edit
    },
    save(element) {
      if (element.new) {
        this.$emit('save', element)
      } else {
        this.$emit('update', element)
      }
    },
    del(element) {
      this.$emit('del', element)
    },
    cancel(element) {
      element.text = element.otext || ""
      this.checkAdd(element)
    },
    dragEnd(element) {
      if (element.oldIndex == element.newIndex) return
      let nitem = Object.assign({}, this.items[element.newIndex])
      let offset = element.oldIndex
      nitem.sort_no = this.items[offset].sort_no
      this.$emit('changeSort', nitem)
    },
    checkAdd(element) {
      if (element) {
        this.toggleEdit(element)
      }
      let hasAdd = false
      this.items.forEach(f => {
        if (!f.text) {
          hasAdd = true
        }
      })
      if (hasAdd) {
        return
      }
      let id = this.items.length > 0 ? this.items[this.items.length - 1].id + 1 : 0
      this.items.push({ id: id, text: "", new: true })
    }
  }
}
</script>
<style scoped>
.cardboard {
  display: flex;
  flex-wrap: wrap;
}

.card-header {
  height: 20px;
  display: flex;
  font-size: 0.8rem;
}

.tool-bar {
  margin-top: 10px;
}

/deep/.el-card.input {
  --el-card-padding: 6px !important;
}

/deep/.el-card__header {
  padding: 0px;
  text-align: center;
  height: 16px;
}
.icon{
  margin: 10px 5px 5px 10px;
  font-size: 1.1rem;
  cursor: pointer;
}


/deep/.el-icon {
  margin-right: 8px;
}

.box-card {
  width: 200px;
  max-width: 200px;
  min-height: 50px;
  height: fit-content;
  margin: 10px;
  text-align: center;
  cursor: move;
}

.box-card .body {
  cursor: pointer;
}

.box-card .add {
  font-size: 2rem;
  color: white;
  cursor: pointer;
}


/* 定义被拖拽对象的样式 */
/* 选中样式 */
.chosen {
  border: 1px solid red;
  cursor: move;
  color: red;

}

.ghost {
  border: solid 1px red;

}
</style>